<template>
  <div class="dialog" style="width=1000px">
    <div class="father">
      <div>
        执行人(已接收)：
        <span>{{ detailInfo.executorReceive }}</span>
      </div>
      <div>
        执行人(未接收)：
        <span>{{ detailInfo.executorNotReceive }}</span>
      </div>

      <div>
        创建时间：
        <span>{{ parseTime(detailInfo.createTime) }}</span>
      </div>
      <div>
        截止时间：
        <span>{{ parseTime(detailInfo.deadlineTime) }}</span>
      </div>
      <div>
        关注人：
        <span> {{ detailInfo.subscribeNames }}</span>
      </div>
      <div>
        任务状态：
        <span>{{ ary[detailInfo.status - 1] }}</span>
      </div>
      <div class="taskcontent">
        任务内容：
        <span>{{ detailInfo.content }} </span>
      </div>
    </div>
    <!-- <div class="app-page"> -->
    <el-card class="table">
      <TablePaging
        :table-list="taskInfo"
        border
        :table-column="deviceTableColumn"
        :table-btn-width="180"
        :table-paging="taskTablePaging"
        :table-total="deviceTableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-card>
    <!-- </div> -->
    <div slot="footer">
      <!-- <el-button @click="dialogVisible = false">
        关闭
      </el-button> -->
      <!-- <el-button type="primary" @click="dialogVisible = false">
        确 定
      </el-button> -->
    </div>
  </div>
</template>

<script>
import { tableColumn } from './config'
import { TablePaging } from '@/components'
import { parseTime } from '@/utils/index'
export default {
  name: 'SaleDetail',
  components: { TablePaging },
  props: {
    detailInfo: {
      type: Object,
      default: () => ({})
    },
    taskInfo: {
      type: Array,
      default: () => []
    },
    taskTablePaging: {
      type: Object,
      default: () => ({}),
      page: 1,
      pagesize: 5
    }
  },
  data() {
    return {
      ary: ['未完成', '部分完成', '已完成 ', '已关闭'],
      parseTime,
      dialogVisible: false,
      deviceTableColumn: tableColumn(1, 5),
      deviceTableTotal: 0,
      dialogTitle: '添加', // 弹窗标题
      modalFormData: {}, // 弹窗表单数据
      deviceCodeDisabled: false // 设备号是否禁止修改
    }
  },
  mounted() {
    console.log(this.detailInfo)
  },
  methods: {
    open(id) {
      this.$data.dialogVisible = true
      this.postDetail(id)
    },
    handlePaginChange(pageInfo) {
      // 分页改变
      this.taskTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    }
  }
}
</script>

<style lang="scss" scope>
ul {
  list-style: none;
}
.dialog {
  color: gray;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  .father {
    display: flex;
    flex-wrap: wrap;
    div {
      width: 50%;
      line-height: 50px;
    }
  }
  .taskcontent {
    width: 100% !important;
  }
  .table {
    width: 100%;
    display: inline-block;
  }
}
</style>
